<template>
  <!--解决移动端全屏展示-->
  <div v-if="$route.meta.useFrame != undefined && $route.meta.useFrame == false">
    <RouterView></RouterView>
  </div>
  <!--不是全屏的时候 useframe == true -->
  <div v-if="$route.meta.useFrame==undefined || $route.meta.useFrame == true">
    <el-container>
      <el-header>
        <el-row class="row-bg" justify="space-between">
          <el-col :span="6" class="logo">
            <img src="../src/assets/logo.jpg" alt="">
          </el-col>
          <el-col :span="6" class="title">
            项目名称
          </el-col>
          <el-col :span="6">
            <el-dropdown>
              <span class="el-dropdown-link">
                美杜莎 <el-icon>
                  <Avatar />
                </el-icon>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>个人中心</el-dropdown-item>
                  <el-dropdown-item>账户与安全</el-dropdown-item>
                  <el-dropdown-item>关于我们</el-dropdown-item>
                  <el-dropdown-item disabled>隐藏数据</el-dropdown-item>
                  <el-dropdown-item divided command="logout">注销</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <Menu></Menu>

        </el-aside>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import Menu from './components/Menu.vue';

</script>
<style scoped>
.el-header{
  margin: 0px;
  padding: 0px;
  background-color: #0c7da9;
  width: 100%;
  height: 50px;
}
.logo img {
  width: 200px;
  height: 50px;

}
.title {
  font-size: 20px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
}
.el-dropdown{
  float: right;
  line-height: 50px;
  color: white;
  font-size: 20px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-aside{
  background-color: #d3d4d6;
}
</style>
